<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Bing-UPMS-注册</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="${request.contextPath}/favicon.ico">
    <link href="${request.contextPath}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${request.contextPath}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${request.contextPath}/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="${request.contextPath}/css/animate.css" rel="stylesheet">
    <link href="${request.contextPath}/css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" href="${request.contextPath}/css/plugins/bootstrap-validator/bootstrapValidator.min.css">
    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>
    <style>
        body {
            height: 0;
        }
        .loginscreen.middle-box {
            width: 360px;
        }
        .box {
            background: #fff;
            padding: 20px;
            border-top: 0;
            color: #666;
        }
        .middle-box {
            padding-top: 0px;
            margin: 8% auto;
            text-align: left;
        }
        .form-control:focus,
        .single-line:focus {
            border-color: #0e9aef !important;
        }
        .code-group {
            display: flex;
        }
        #code {
            max-width: 178px;
        }

        #button_code {
            margin-left: 33px;
        }
        .code-group small {
            position: absolute;
            display: flex;
            margin-top: 33px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="middle-box text-center loginscreen   animated fadeInDown">

    <div class="box">

        <h3>欢迎注册 Bing-UPMS</h3>
        <#--<p>创建一个H+新账户</p>-->
        <form id="addForm" class="m-t" role="form">
            <div class="form-group">
                <input type="text" class="form-control" name="username" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" name="password" placeholder="请输入密码">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" name="confirmPassword" placeholder="请再次输入密码">
            </div>
            <div class="form-group">
                <input id="email" type="email" class="form-control" name="email" placeholder="请输入邮箱">
            </div>
            <div class="form-group code-group">
                <input type="text" id="code" name="code" class="form-control" maxlength="6" placeholder="验证码" autocomplete="off">
                <button type="button" id="button_code" class="btn">获取邮箱验证码</button>
            </div>
            <button type="submit" class="btn btn-primary block full-width m-b">注 册</button>

            <p class="text-muted text-center"><small>已经有账户了？</small><a href="login.html">点此登录</a>
            </p>

        </form>
    </div>
</div>
<!-- 全局js -->
<script src="${request.contextPath}/js/jquery.min.js?v=2.1.4"></script>
<script src="${request.contextPath}/js/bootstrap.min.js?v=3.3.6"></script>
<!-- layer javascript -->
<script src="${request.contextPath}/js/plugins/layer/layer.min.js"></script>
<!-- iCheck -->
<script src="${request.contextPath}/js/plugins/iCheck/icheck.min.js"></script>
<script src="${request.contextPath}/js/plugins/bootstrap-validator/bootstrapValidator.js"></script>
<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });

    $("#button_code").click(function () {
        var re = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        var email = $("#email").val();
        if (!re.test(email)) {
            parent.layer.msg('请输入正确邮箱地址', {time: 1500, icon:5});
            return;
        }
        layer.load();

        $.ajax({
            url: "/admin/sencCode",
            data:  email,
            contentType: "application/json; charset=utf-8",
            type: "POST",
            dataType: 'json',
            success: function(data){
                if (data.success) {
                    parent.layer.msg(data.msg, {icon: 1});
                } else {
                    parent.layer.msg(data.msg, {time: 1500, icon:5});
                }
                layer.closeAll('loading');
            }
        });
    });

    $('#addForm').bootstrapValidator({
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    },
                    stringLength: {
                        max: 30,
                        message: '用户名长度最多30个字符'
                    },
                    remote: {
                        url: '/admin/isUsername',
                        message: '用户名已存在'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: '邮箱不能为空'
                    },
                    emailAddress: {
                        message: '请输入有效的邮箱'
                    },
                    remote: {
                        url: '/admin/isEmail',
                        message: '邮箱已注册'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    },
                    stringLength: {
                        min: 5,
                        max: 30,
                        message: '密码长度在5到30之间'
                    }
                }
            },
            confirmPassword: {
                validators: {
                    notEmpty: {
                        message: '确认密码不能为空'
                    },
                    identical: {
                        field: 'password',
                        message: '两次密码不相同'
                    }
                }
            },
            code: {
                validators: {
                    notEmpty: {
                        message: '验证码不能为空'
                    },
                    stringLength: {
                        max: 30,
                        message: '用户名长度最多30个字符'
                    },
                    /*remote: {
                        url: 'remote.php',
                        message: 'The username is not available'
                    },*/
                }
            },
        }
    }).on('success.form.bv', function(e) {
        // Prevent form submission
        e.preventDefault();

        $.ajax({
            url: "/admin/register",
            data:  $("#addForm").serialize(),
            type: "POST",
            dataType: 'json',
            success: function(data){
                if (data.success) {
                    parent.layer.msg(data.msg, {icon: 1});
                } else {
                    parent.layer.msg(data.msg, {time: 1500, icon:5});
                }
            }
        });
    });
</script>

</body>
</html>